<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="assets/images/favicon.png" type="image/png">
    <title>数据报表</title>

    <!--Begin  Page Level  CSS -->
    <link href="assets/plugins/morris-chart/morris.css" rel="stylesheet">
    <link href="assets/plugins/jquery-ui/jquery-ui.min.css" rel="stylesheet"/>
    <!--End  Page Level  CSS -->
    <link href="assets/css/icons.css" rel="stylesheet">
    <link href="assets/css/bootstrap.min.css" rel="stylesheet">
    <link href="assets/css/style.css" rel="stylesheet">
    <link href="assets/css/responsive.css" rel="stylesheet">

    <style type="text/css">
        .highcharts-figure, .highcharts-data-table table {
            min-width: 320px;
            max-width: 800px;
            margin: 1em auto;
        }

        .highcharts-data-table table {
            font-family: Verdana, sans-serif;
            border-collapse: collapse;
            border: 1px solid #EBEBEB;
            margin: 10px auto;
            text-align: center;
            width: 100%;
            max-width: 500px;
        }

        .highcharts-data-table caption {
            padding: 1em 0;
            font-size: 1.2em;
            color: #555;
        }

        .highcharts-data-table th {
            font-weight: 600;
            padding: 0.5em;
        }

        .highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption {
            padding: 0.5em;
        }

        .highcharts-data-table thead tr, .highcharts-data-table tr:nth-child(even) {
            background: #f8f8f8;
        }

        .highcharts-data-table tr:hover {
            background: #f1f7ff;
        }


        input[type="number"] {
            min-width: 50px;
        }
    </style>
</head>

<body class="sticky-header">

<!--Start left side Menu-->
<div id="nav-left" class="left-side sticky-left-side">
</div>

<!-- main content start-->
<div id="app" class="main-content">

    <!-- header section start-->
    <!--        <script src="assets/js/commonPage/header.js"></script>-->
    <div class="header-section">

        <a class="toggle-btn"><i class="fa fa-bars"></i></a>

        <form class="searchform">
            <input type="text" class="form-control" name="keyword" placeholder="Search here..."/>
        </form>

        <!--notification menu start -->
        <div class="menu-right">
            <ul class="notification-menu">
                <li>
                    <a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                        <img :src="avatar" alt=""/>
                        头像
                        <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu dropdown-menu-usermenu pull-right">
                        <li><a href="#"> <i class="fa fa-wrench"></i> uff </a></li>
                        <li><a href="#"> <i class="fa fa-user"></i> Profile </a></li>
                        <li><a href="#"> <i class="fa fa-info"></i> Help </a></li>
                        <li><a href="#"> <i class="fa fa-lock"></i> Logout </a></li>
                    </ul>
                </li>

            </ul>
        </div>
        <!--notification menu end -->

    </div>
    <!-- header section end-->


    <!--body wrapper start-->
    <div class="wrapper">

        <!--Start Page Title-->
        <div class="page-title-box" style="padding-top: 3.5%">
            <h4 class="page-title">数据中心 </h4>
            <ol class="breadcrumb">
                <li>
                    <a href="#">数据中心</a>
                </li>

                <li class="active">
                    商品数据
                </li>
            </ol>
            <div class="clearfix"></div>
        </div>
        <!--End Page Title-->

        <!--Start row-->
        <div class="row">
            <div class="container">
                <div class="analytics-box">

                </div>
            </div>
        </div>
        <!--End row-->

        <!--Start row-->
        <div class="row">
            <!--Start info box-->
            <div class="col-md-3 col-sm-6">
                <div class="info-box-main">
                    <div class="info-stats">
                        <p>{{orderData.sellerGoodsNum}}</p>
                        <span>上架商品数量</span>
                    </div>
                    <div class="info-icon text-primary ">
                        <i class="mdi mdi-cart"></i>
                    </div>
                    <div class="info-box-progress">
                        <div class="progress">
                            <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="48"
                                 aria-valuemin="0" aria-valuemax="100" style="width: 48%;">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--End info box-->

            <!--Start info box-->
            <div class="col-md-3 col-sm-6">
                <div class="info-box-main">
                    <div class="info-stats">
                        <p>{{orderData.sellerScanNum}}</p>
                        <span>日浏览商品数</span>
                    </div>
                    <div class="info-icon text-info">
                        <i class="mdi mdi-account-multiple"></i>
                    </div>
                    <div class="info-box-progress">
                        <div class="progress">
                            <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="48"
                                 aria-valuemin="0" aria-valuemax="100" style="width: 48%;">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--End info box-->

            <!--Start info box-->
            <div class="col-md-3 col-sm-6">
                <div class="info-box-main">
                    <div class="info-stats">
                        <p>{{orderData.sellerAmountNum}}</p>
                        <span>日销售额</span>
                    </div>
                    <div class="info-icon text-warning">
                        <i class="fa fa-dollar"></i>
                    </div>
                    <div class="info-box-progress">
                        <div class="progress">
                            <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="48"
                                 aria-valuemin="0" aria-valuemax="100" style="width: 48%;">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--End info box-->

            <!--Start info box-->
            <div class="col-md-3 col-sm-6">
                <div class="info-box-main">
                    <div class="info-stats">
                        <p>{{orderData.sellerOrderNum}}</p>
                        <span>日订单数</span>
                    </div>
                    <div class="info-icon text-danger">
                        <i class="mdi mdi-weight"></i>
                    </div>
                    <div class="info-box-progress">
                        <div class="progress">
                            <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="48"
                                 aria-valuemin="0" aria-valuemax="100" style="width: 48%;">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--End info box-->

        </div>
        <!--End row-->


        <!--Start row 第一个表-->
        <div class="row">
            <div class="col-md-12">
                <div class="white-box">
                    <h2 class="header-title">Sales Analytics</h2>
                    <div id="container1"></div>
                </div>
            </div>

            <!--第二个表-->
            <div class="col-md-6">
                <div class="white-box">
                    <div id="container2"></div>
                </div>
            </div><!-- /col-md-6-->

            <!--            第三个表-->
            <div class="col-md-6">
                <div class="white-box">
                    <div id="container3"></div>
                </div>
            </div><!-- /col-md-6-->


        </div>
        <!--End row-->

    </div>
    <!-- End Wrapper-->


    <!--Start  Footer -->
    <footer class="footer-main">Copyright &copy; 2018.Company name All rights reserved.
        <a target="_blank"
           href="http://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a>
    </footer>
    <!--End footer -->

</div>
<!--End main content -->


<!--Begin core plugin -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/functions.js"></script>
<!-- End core plugin -->
<!--====== Vue js ======-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!--====== http util js ======-->
<script src="assets/js/util/http-util.js"></script>

<!--highc-->
<script src="assets/js/code/code/highcharts.js"></script>


</body>
<script>
    $(function () {
        $('#footer').load('footer.html');
        $('#nav-left').load('nav-left.html');
    });
    $(function () {
        let url = "/shop_admin/chart/pie";
        doGet(url, function (resp) {
            Highcharts.chart('container2', {
                chart: {
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false,
                    type: 'pie'
                },
                title: {
                    text: '本店各类商品份额'
                },
                tooltip: {
                    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                },
                accessibility: {
                    point: {
                        valueSuffix: '%'
                    }
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: true,
                            format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                        }
                    }
                },
                series: [{
                    name: '份额',
                    colorByPoint: true,
                    data: resp
                }]
            });
        });
    });

    $(function () {
        let url = "/shop_admin/chart/weekData";
        doGet(url, function (resp) {
            Highcharts.chart('container1', {

                title: {
                    text: '店铺一周的营业额'
                },
                subtitle: {
                    text: 'Source: sexy-shop'
                },
                yAxis: {
                    title: {
                        text: '金额'
                    }
                },
                xAxis: {
                    accessibility: {
                        rangeDescription: 'Range: 1 to 7'
                    }
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'middle'
                },
                plotOptions: {
                    series: {
                        label: {
                            connectorAllowed: false
                        },
                        pointStart: 1
                    }
                },
                series: [{
                    name: '营业额',
                    data: resp
                },
                ],
                responsive: {
                    rules: [{
                        condition: {
                            maxWidth: 500
                        },
                        chartOptions: {
                            legend: {
                                layout: 'horizontal',
                                align: 'center',
                                verticalAlign: 'bottom'
                            }
                        }
                    }]
                }
            });
        });
    });

    var vmqqq = new Vue({
        el: '#app',
        data: {
            avatar: "",
            orderData: [],
            userNum: [],
            showcount: [],
        },
        components: {},
        methods: {
            getOrderData: function () {
                let url = "/shop_admin/chart/orderData";
                let thisObj = this;
                doGet(url, function (resp) {
                    thisObj.orderData = resp;
                    console.log(thisObj.orderData);
                })
            },
            getAvatar: function () {
                console.log("进入方法");
                let url = "/shop_admin/getAvatar";
                let thisObj = this;
                doGet(url, function (resp) {
                    thisObj.avatar = "assets/images/avatar/" + resp;
                    console.log(thisObj.avatar);
                })
            },
            show: function () {
                let url = "/shop_api/listen";
                let thisObj = this;
                doGet(url, function (resp) {
                    thisObj.showcount = resp;
                    console.log(resp);
                });
            },
        },
        mounted: function () {
            this.getAvatar();
            this.getOrderData();
            this.$nextTick(() => {
                setInterval(() => {
                    setTimeout(this.show, 0)
                }, 1000)
            })
        }
    })

    $(function () {
        Highcharts.chart('container3', {
            chart: {
                type: 'spline',
                animation: Highcharts.svg, // don't animate in old IE
                marginRight: 10,
                events: {
                    load: function () {
                        console.log(vmqqq);
                        console.log("-------------------");
                        // set up the updating of the chart each second
                        var series = this.series[0];
                        setInterval(function () {
                            var x = (new Date()).getTime(), // current time
                                                            //传值到这里
                                y = vmqqq.showcount;
                            series.addPoint([x, y], true, true);
                        }, 1000);
                    }
                }
            },
            time: {
                useUTC: false
            },
            title: {
                text: '现商城在线人数'
            },
            accessibility: {
                announceNewData: {
                    enabled: true,
                    minAnnounceInterval: 15000,
                    announcementFormatter: function (allSeries, newSeries, newPoint) {
                        if (newPoint) {
                            return 'New point added. Value: ' + newPoint.y;
                        }
                        return false;
                    }
                }
            },

            xAxis: {
                type: 'datetime',
                tickPixelInterval: 150
            },

            yAxis: {
                title: {
                    text: 'Value'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },

            tooltip: {
                headerFormat: '<b>{series.name}</b><br/>',
                pointFormat: '{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}'
            },

            legend: {
                enabled: false
            },

            exporting: {
                enabled: false
            },

            series: [{
                name: 'Random data',
                data: (function () {
                    // generate an array of random data
                    var data = [],
                        time = (new Date()).getTime(),
                        i;

                    for (i = -19; i <= 0; i += 1) {
                        data.push({
                            x: time + i * 1000,
                            y: Math.random()
                        });
                    }
                    return data;
                }())
            }]

        })
    });
</script>
</html>
